<template>
  <div class="login">
    <div>
      <div class="login-title">
        <span>纯洁的逗比后台管理系统</span>
      </div>
      <el-form :model="loginForm" :rules="rules" ref="ruleForm">
        <div class="login-item">
          <el-input v-model="loginForm.userName" name="user" :prefix-icon="User"></el-input>
        </div>
        <div class="login-item">
          <el-input type="password" v-model="loginForm.password" name="password" show-password
            :prefix-icon="Lock"></el-input>
        </div>
        <el-button @click="submitForm(ruleForm)" type="primary" :size="'large'" class="login-submit">
          {{ $t("login.login") }}
        </el-button>
      </el-form>
    </div>
    <div class="login-copyright">
      <el-link type="info" :underline="false" href="https://beian.miit.gov.cn">
        陇ICP备202000450号-1
      </el-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { FormRules } from "element-plus";
import { User, Lock } from "@element-plus/icons-vue";
import { LoginForm } from "@/api/login/index";
import { useUserStore } from "@/store";
import { LocationQuery, LocationQueryValue } from "vue-router";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const router = useRouter();
const loginForm = reactive<LoginForm>({
  userName: "admin",
  password: "123456",
});
const rules = reactive<FormRules>({
  userName: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
    //  {
    //    min: 3,
    //    max: 18,
    //    message: "长度为3-18位",
    //    trigger: "blur",
    //  },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      min: 3,
      max: 18,
      message: "长度为3-18位",
      trigger: "blur",
    },
  ],
});
const route = useRoute();
const userStore = useUserStore();
const ruleForm = ref(null);
function submitForm(formEl) {
  formEl.validate(async (valid) => {
    if (valid) {
      const success = await userStore.login(loginForm);
      if (success) {
        //跳转
        const query: LocationQuery = route.query;
        const redirect = (query.redirect as LocationQueryValue) ?? "/";
        const otherQueryParams = Object.keys(query).reduce((acc: any, cur: string) => {
          if (cur !== "redirect") {
            acc[cur] = query[cur];
          }
          return acc;
        }, {});

        router.push({ path: redirect, query: otherQueryParams });
      }
    } else {
      return false;
    }
  });
}
</script>

<style scoped lang="scss">
/*登录*/
.login {
  --el-component-size-small: 40px; //输入框高度
  background: url(@/assets/img/bg.jpg) no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
  perspective: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-title {
  font-family: "STXingkai";
  font-size: 40px;
  color: #fff;
  text-align: center;
  padding: 10px 0px;
  text-shadow:
    1px -1px #fff,
    -1px 1px #999,
    -10px 10px 10px #80808080;
}

.login-item {
  padding-bottom: 10px;
}

.login-submit {
  width: 100%;
}

.login-copyright {
  position: fixed;
  bottom: 10px;
  width: 100%;
  text-align: center;
}
</style>
